<div class="demo-container">
  <div class="demo-example">
      <div class="demo-title">基础用法</div>
      <div class="demo-text">
          通过 source 设置自动完成的数据源
      </div>
      <d-codebox id="components-auto-basic" [sourceData]="AutoCompleteDemoBasic">
          <d-auto-complete-demo-basic demo></d-auto-complete-demo-basic>
        </d-codebox>
  </div>
  <div class="demo-example">
      <div class="demo-title">自定义数据匹配方法</div>
      <div class="demo-text">
          通过 searchFn 自定义数据的匹配方法和返回的数据格式
      </div>
      <d-codebox id="components-auto-object" [sourceData]="AutoCompleteDemoObject">
          <d-auto-complete-demo-object demo></d-auto-complete-demo-object>
        </d-codebox>
  </div>
  <div class="demo-example">
      <div class="demo-title">自定义模板展示</div>
      <div class="demo-text">
          通过 itemTemplate、noResultItemTemplate 自定义下拉框和无匹配提示
      </div>
      <d-codebox id="components-auto-custom" [sourceData]="AutoCompleteDemoCustom">
          <d-auto-complete-demo-custom demo></d-auto-complete-demo-custom>
        </d-codebox>
  </div>
  <div class="demo-example">
      <div class="demo-title">设置禁用</div>
      <div class="demo-text">
          通过 disabled 设置输入框禁用
      </div>
      <d-codebox id="components-auto-disable" [sourceData]="AutoCompleteDemoDisable">
          <d-auto-complete-demo-disable demo></d-auto-complete-demo-disable>
        </d-codebox>
  </div>
</div>
